import { PointInterface } from "./point-interface";
import { PointStyle } from "./point-style";
import { Operation } from "../../operation.model";
import { ShapeBoxBase } from "../../component-model/component-related/box-base";
import { CommonUtil } from "../../../../util/common-util";

export class PointBase extends Operation implements PointInterface {
    style: PointStyle;
    visible: boolean;
    belongTo: ShapeBoxBase;
    pwh: number = 7;

    //移动操作时候调用的方法，初始化参数指定
    // move(e) { }
    //获取点的style信息，初始化参数指定
    getData;

    hide() {
        this.visible = false;
    }
    show() {
        this.visible = true;
    }
    select(e) {
        super.select(e);
        this.belongTo.select(e);
    }
    canvasMove(e) {
        let width = this.getWidth();
        let height = this.getHeight();
        let keyPoints = [{
            left: width / 2 + CommonUtil.px2num(this.style.left), top: height / 2 + CommonUtil.px2num(this.style.top)
        }]
        if (Math.pow(keyPoints[0].left - e.offsetX, 2) + Math.pow(keyPoints[0].top - e.offsetY, 2) < Math.pow(this.getWidth(), 2) / 2) {
            this.boxService.cursor(this.style.cursor);
            return true;
        }
        return false;
    }
    setStyle(data) {
        data.left += "px";
        data.top += "px";
        data.width += "px";
        data.height += "px";
        if (!this.style) {
            this.style = new PointStyle(data);
        } else {
            this.style.left = data.left;
            this.style.top = data.top;
            this.style.height = data.height;
            this.style.width = data.width;
        }
    }
    configPwh() {
        let data = this.getData({
            ...this.belongTo.getBaseData(),
            pwh: this.pwh
        });
        data.left -= this.pwh / 2;
        data.top -= this.pwh / 2;
        data.width = data.height = this.pwh;
        return data;
    }

    render() {
        let data = this.configPwh();
        this.setStyle(data);
        if (this.hasCanvas) {
            this.paint();
        }
    }
    constructor(data) {
        super();
        if (data.pwh) {
            this.pwh = data.pwh;
        }
        this.belongTo = data.belongTo;
        this.getData = data.getData;
        this.setStyle({
            ...this.configPwh(), ...data
        });
        this.style["border-color"] = "#883333";
        this.style.color = "#883333";
        this.hide();
    }
}